<template>
    <div class="box">

        <div class="head">

            <img  src="../../image//22.png"  @click="fh" alt="" style="width: 34px; height: 34px; border: none;"
                class="h-img"> <span class="h-span">充值</span>

        </div>

        <div class="main">


            <div class="main-top">
                <p style="font-size: 30px; margin-left: 40px;">充值金额</p>
                <div class="mt-1">
                    <span style="font-size: 130px; margin-right: 30px;">￥</span>
                    <span class="put">
                        <input type="number" v-model="inputnumber" style="outline: none;" class="put-1"></span>
                    <span class="mt-1-span">本次可获得 <span style="color: red;">{{inputnumber*100}}</span>H币</span>
                </div>

                <div class="mt-2">
                    <p>最低充值1元, 1元可兑换100H币</p>
                </div>
            </div>





           <div class="main-main">
            <div class="main-main-cz">
            <p style="margin-bottom: 40px; font-size: 26px;">选择充值方式</p>
            <van-radio-group v-model="checked">

             <van-radio name="2" label-position="left" style="margin-top:20px;  ">
                <img src="../../image//wx.png" class="wx-img" alt="">
                 <span class="main-wx">微信支付</span>
            </van-radio>

            <van-radio name="1" label-position="left" style="margin-top: 30px;">
                <img src="../../image//zfb.png" class="zfb-img" alt="">
              <span class="main-zfb">支付宝支付</span>
            </van-radio>

           </van-radio-group>
            </div>

           </div>


            <div class="main-bt">
                <button class="main-bt-bt" @click="czok">充值</button>
            </div>


        </div>




    </div>
</template>


<script setup lang="ts">
import axios from 'axios';
import { imageEmits } from 'element-plus';
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const checked = ref('1')
const router = useRouter()
const inputnumber:any=ref(0)


const userId=ref(JSON.parse(localStorage.getItem('userId')||''))
const sessionId=ref(JSON.parse(localStorage.getItem('sessionId')||''))


// const moneyA: any = ref(0)
// const zfok = () => {
//         // localStorage.setItem('moneyA', JSON.stringify(moneyA.value))
//         router.push('/rechargeok')
// }




const czok = async () => {

   localStorage.setItem('inputnumber', JSON.stringify(inputnumber.value))

    const czjk = async () => {
  await axios.post("/health/user/verify/v1/recharge",
    {
      money:1,
      payType:2, 
    },
    {
      headers: {
        userId:userId.value as number,
        sessionId:sessionId.value as string,
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }
  ).then(res => {
    console.log(res.data, '充值接口');
   
  })
}
czjk()


  console.log('123456');
  ('123456');
  console.log('====================================');
  console.log("111111111111111111111");
  console.log('====================================');
  // router.push('/rechargecg')
  await axios.get('/api/pay',{params:{
    total_amount:inputnumber.value,//金额
    out_trade_no:'NO'+ new Date().getTime(),//订单号
    subject:'H币充值',//标题
    body:'H币充值',//描述

  }}).then(res=>{
    console.log(res);
    window.open(res.data,'121212');
   
  })


  

}




// const czok =async () => {

// //   router.push('/rechargeok')
//   await axios.get('/api/pay',{params:{
//     total_amount:inputnumber.value,//金额
//     out_trade_no:'NO'+ new Date().getTime(),//订单号
//     subject:'H币充值',//标题
//     body:'H币充值',//描述
//   }}).then(res=>{
//     console.log(res);
//     window.open(res.data,'充值');

//   })

// }



const fh = () => {
    router.go(-1)
}




// const getlist=()=>{
//     axios.post('/health/user/verify/v1/recharge',
//       {
//         money:200,
//         payType:2
//       },
//       {
//         headers:{
//             userId:userId.value as number,
//             sessionId:sessionId.value as string,
//              'Content-Type': 'application/x-www-form-urlencoded'
//         }
//       }
// )
//     .then((res)=>{
//         console.log(res.data,'充值接口')
//     })

// }
// getlist()



</script>




<style scoped lang="scss" >
.box{

    display: flex;
    display: inline-block;
    width: 100%;
    height: 667px; // 1334px * 0.5
    background-color: #f2f2f2;
}

.head {
    display: flex;
    width: 100%;
    height: 50px; // 100px * 0.5
    line-height: 50px; // 100px * 0.5
    background-color: #fff;
}


.h-img {
    margin-left: 10%;
    margin-top: 35px;
    color: #ccc;
}

.h-span {
    margin-left: 34%;
    font-size: 30px;
}

.put {
    margin-top: 25px;
}
.h-img{
    margin-left: 8%; // 5% * 0.5
    margin-top: 17.5px; // 35px * 0.5
    color: #ccc;
}
.h-span{
    margin-left: 32%; // 34% * 0.5
    font-size: 20px; // 30px * 0.5
}
.put{
    margin-top: 20px; // 25px * 0.5

    display: flex;
    height: 50px; // 100px * 0.5
}


.put-1 {
    width: 320px;
    height: 100px;
    border: none;
    outline: none;
    font-size: 120px;
    color: #3087ea;
}
.put-1{
      width: 160px; // 320px * 0.5
      height: 50px; // 100px * 0.5
      border: none;
      outline: none;
      font-size: 60px; // 120px * 0.5
      color:#3087ea ;

}



.main {
    display: flex;
    display: inline-block;
    width: 100%;
    height: 100%;
    margin-top: 1%; // 2% * 0.5
    background-color: #fff;
}

.main-main-cz {
    display: flex;
    display: inline-block;
    margin-left: 25px; // 50px * 0.5
}



.main-top {
    width: 100%;
    height: 150px; // 300px * 0.5
    background-color: #fff;

    margin-top: 100px;


    margin-top: 50px; // 100px * 0.5

}

.main-main {
    width: 100%;
    height: 150px; // 300px * 0.5
    margin-top: 15px; // 30px * 0.5
}

.main-bt {
    width: 100%;
    height: 100px; // 200px * 0.5
    margin-top: 25px; // 50px * 0.5
    text-align: center;
}

.mt-1 {
    display: flex;
    width: 100%;
    height: 65px;
    padding-bottom: 20px;
    padding-left: 20px;
    border-bottom: 1px solid #ccc;

}

.mt-2 {
    color: #9b9b9b;
    margin-left: 35px;
    font-size: 20px;

}

.mt-1-span {
    margin-top: 95px;
    color: #ccc;


    height: 65px; // 130px * 0.5
    padding-bottom: 10px; // 20px * 0.5


}
.mt-2{
     color: #9b9b9b;
     margin-left: 17.5px; // 35px * 0.5
     font-size: 10px; // 20px * 0.5
}

.mt-1-span{
    margin-top: 47.5px; // 95px * 0.5
    color: #ccc;

}

.wx {
    display: flex;
    width: 100%;
    height: 35px; // 70px * 0.5
    background-color: red;
}


.wx-img {
    width: 50px;
    height: 50px;
    margin-right: 20px;
    float: left;
}

.zfb-img {
    width: 50px;
    height: 50px;
    margin-right: 20px;
}
.wx-img{
    width: 25px; // 50px * 0.5
    height: 25px; // 50px * 0.5
    margin-right: 10px; // 20px * 0.5
    float: left;
}

.zfb-img{
     width: 25px; // 50px * 0.5
    height: 25px; // 50px * 0.5
      margin-right: 10px; // 20px * 0.5

    float: left;
}



.main-wx {
    font-size: 29px;
    margin-right: 430px;
}

.main-zfb {
    font-size: 29px;
    margin-right: 400px;
}

.main-bt-bt {

    width: 500px;
    height: 80px;
    background-color: #3087ea;
    color: #fff;
    vertical-align: middle;
}

.main-wx{
    font-size: 14.5px; // 29px * 0.5
    margin-right: 215px; // 430px * 0.5
}
.main-zfb{
     font-size: 14.5px; // 29px * 0.5
    margin-right: 200px; // 400px * 0.5
}
.main-bt-bt{
     width: 300px; // 500px * 0.5
     height: 40px; // 80px * 0.5
     background-color: #3087ea;
     color: #fff;
     vertical-align: middle;
     border-radius: 5px;
     border:none;
    align-items: center;
    text-align: center;
    margin-top: 30px; // 60px * 0.5
}


</style>
